<template>
  <div>App...<AComp /><BComp /></div>
</template>

<script>
// import Vue from "vue";
/*
  全局事件总线：
    需求: 使用自定义事件来实现任意组件通信
    问题：自定义事件只能父子组件通信 -> 自定义事件给哪个组件绑定，就只有这个组件能触发
    假设：任意组件都可以绑定事件，任意组件都能触发事件，就可以实现任意组件通信
    实现：
      1. 找到一个可以绑定自定义事件的对象 
        vm 或 组件实例对象
        （因为实现在main.js，main.js获取vm更方便）

      2. 让这个对象可以让任意组件访问
        将这个对象添加到 Vue原型对象上 或 VueComponent原型对象上，所有组件实例就能通过隐式原型得到它了
        （使用Vue原型对象，因为VueComponent原型对象不好获取）
        （因为实现在main.js，main.js获取Vue原型对象更方便）
      最终：所有组件都可以通过这个对象去绑定事件和触发事件，从而实现任意组件通信
      
      3. 这个实现在哪个文件中完成？完成后所有组件都可以正常使用
        在main.js中完成（如果在App组件完成，可能导致App组件没法使用）
        （全局操作、功能统一在main.js中完成）

      总结：在main.js中，给Vue原型对象添加一个vm属性，作为绑定自定义事件的对象，这个对象我们叫做全局事件总线对象
      
    使用：
      1. 绑定全局事件总线对象
        main.js
        beforeCreate() {
          Vue.prototype.$bus = this
        }

      2. 绑定事件（接受数据方）
        mounted() {
          this.$bus.$on('xxx', xxx)
        },
        beforeDestroy() {
          this.$bus.$off('xxx')
        }
        
      3. 触发事件（发送数据方）
        this.$bus.$emit('xxx', xxx)

*/
import AComp from "./AComp.vue";
import BComp from "./BComp.vue";

export default {
  name: "App",
  components: {
    AComp,
    BComp,
  },
  // beforeCreate() {
  //   console.log("App beforeCreate");
  // },
  mounted() {
    // 结论：组件实例对象是new VueComponent产生的
    // 说明组件在解析时，会自动new VueComponent，生成的就是组件实例对象（Vue内部做的事）
    // console.log("App", this); // VueComponent { ... }
    // this.__proto__ === VueComponent.prototype
    // console.log(this.__proto__.__proto__ === Vue.prototype);
    // console.log("App mounted");
    console.log(this.$globalEventBus);
  },
};
</script>

<style></style>